<template>
	<view class="shenqingdaili warpper" v-if="!daili_data">
		<uni-icons type="locked" size="340rpx" style="margin-top: 40rpx" color="#1aad19"></uni-icons>
		<text class="t_kaitong">申请开通分销权限</text>
		<text class="t_desc"
			>申请开通分销权限后，您可以通过分享二维码的方式推广告本平台，推广成功后，您将获得相应的分销奖励</text
		>
		<button type="primary" style="width: 95%; margin-top: 40rpx; background-color: #1aad19" @click="shenqingdaili">
			申请开通
		</button>
		<text class="t_desc" style="margin-top: 30rpx">仅对开通过周会员月会员或者年会员的用户开放</text>
	</view>
	<view class="DaiLi" v-else>
		<view class="DaiLi-tap flex flex-column" warpper>
			<view class="flex jb">
				<view class="flex flex-column">
					<view class="commCls"> 今日盈利（元）</view>
					<view class="nowMoney"> +{{ daili_data.today_commission }}</view>
				</view>
			</view>

			<view class="flex jb ai" style="margin-top: 54rpx">
				<view class="flex ai f1" @click="jumpto('/src/pages/My/daili/DaiLiXiaJiPay/DaiLiXiaJiPay?date=today')">
					<view class="commCls">今日充值</view>
					<view class="money">{{ daili_data.today_amount }}</view>
					<uni-icons type="right" size="16" color="#fff"></uni-icons>
				</view>
				<view class="commCls">|</view>
				<view
					class="flex ai f1"
					style="margin-left: 20rpx"
					@click="jumpto('/src/pages/My/daili/DaiLiXiaJiPay/DaiLiXiaJiPay')"
				>
					<view class="commCls">总盈利</view>
					<view class="money">{{ daili_data.total_commission }}</view>
					<uni-icons type="right" size="16" color="#fff"></uni-icons>
				</view>
			</view>

			<view class="showCenter">
				<uni-card
					:is-shadow="true"
					padding="0"
					spacing="0"
					is-full
					style="border-radius: 20rpx; overflow: hidden"
					class="card-showCenter"
				>
					<view class="flex" style="justify-content: space-around">
						<view class="flex flex-column ai" @click="jumpto('/src/pages/My/daili/DaiLiXiaJI/DaiLiXiaJI?date=today')">
							<view class="showCenter-tit">今日推广人数</view>
							<view class="showCenter-num">{{ daili_data.today_count }}</view>
						</view>
						<view class="line"></view>
						<view
							class="flex flex-column ai"
							@click="jumpto('/src/pages/My/daili/DaiLiXiaJI/DaiLiXiaJI')"
						>
							<view class="showCenter-tit">总推广人数</view>
							<view class="showCenter-num">{{ daili_data.total_count }}</view>
						</view>
						<view class="line"></view>
						<view class="flex flex-column ai" @click="get_daili_qrcode">
							<view class="showCenter-tit">分享海报</view>
							<view class="showCenter-require">获取</view>
						</view>
					</view>
				</uni-card>
			</view>
		</view>
		<view style="margin-top: 100rpx"> </view>
		<uni-card padding="0" spacing="0" class="cardCls" v-if="daili_price">
			<template v-slot:cover>
				<view class="table-head flex ai" style="justify-content: space-between">
					<view class="f1">类目(积分)</view>
					<view class="f1">成本(元)</view>
					<view class="sellingPriceText">售价(元)</view>
				</view>
			</template>
			<view
				class="table-line-block"
				v-for="(item, index) in daili_price.filter((item) => item.trade_type == 1)"
				:key="index"
				@click="onChangePriceClick(item.pay_id, item.price)"
			>
				<view class="f1">{{ item.score }}积分 </view>
				<view class="f1">{{ item.cost_price }} </view>
				<view class="sellingPrice">{{ item.price }}</view>
				<view class="edit">
					<image src="@/static/img/edit.png" style="margin-left: auto; width: 22rpx; height: 22rpx"></image>
				</view>
			</view>
		</uni-card>
		<uni-card padding="0" spacing="0" class="cardCls" v-if="daili_price">
			<template v-slot:cover>
				<view class="table-head flex ai blue-bg" style="justify-content: space-between">
					<view class="f1">类目(会员)</view>
					<view class="f1">成本(元)</view>
					<view class="sellingPriceText">售价(元)</view>
				</view>
			</template>
			<view
				class="table-line-block"
				v-for="(item, index) in daili_price.filter((item) => item.trade_type == 2)"
				:key="index"
				@click="onChangePriceClick(item.pay_id, item.price)"
			>
				<view class="f1">{{ item.hours >= 24 ? `${item.hours / 24}天` : `${item.hours}小时` }}</view>
				<view class="f1">{{ item.cost_price }} </view>
				<view class="sellingPrice">{{ item.price }}</view>
				<view class="edit">
					<image src="@/static/img/edit.png" style="margin-left: auto; width: 22rpx; height: 22rpx"></image>
				</view>
			</view>
		</uni-card>

		<uni-card title="规则说明" class="rule-card">
			<view class="item">
				<view class="rule-tit">1.成本价，销售价是什么意思？</view>
				<view class="rule-content"
					>通过您分享的海报扫码打开的新用户看到购买套餐，就是您设置的售价，您的佣金就是每一单的售价减去成本，如需要增加，减少，修改支付套餐均可联系客服</view
				>
			</view>
			<view class="item">
				<view class="rule-tit">2、佣金如何提现？</view>
				<view class="rule-content">申请代理成功后，立马联系客服，然后跟客服约定如何提现</view>
			</view>
			<view class="item">
				<view class="rule-tit">3、为啥邀请了用户我名下却没有？</view>
				<view class="rule-content">1.是通过本页面的邀请海报邀请的吗？2.邀请的好友可能不是新用户或已被其他人绑定</view>
			</view>
			<view class="item">
				<view class="rule-tit">4、其他问题？</view>
				<view class="rule-content">可以联系客服解决</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
import {
	get_daili,
	get_daili2,
	daili_price as get_daili_price,
	daili_price2 as get_daili_price2,
} from '@/src/api/huanlian.js';
export default {
	data() {
		return {
			daili_data: null,
			userData: null,
			daili_price: null,
		};
	},
	onLoad() {
		this.get_daili_data();
		this.userData = getApp().globalData.userData;
	},
	methods: {
		onChangePriceClick(pay_id, origin_price) {
			let aa = uni;
			let _this = this;
			// #ifdef MP-ALIPAY
			aa = my;
			// #endif
			aa.showModal({
				title: '请输入修改后的售价',
				editable: true,
				confirmText: '确定',
				placeholderText: origin_price,
				success: function (res) {
					if (res.confirm && res.content) {
						_this.change_price(pay_id, res.content);
					}
				},
			});
		},

		async change_price(pay_id, new_price) {
			try {
				let res = await get_daili_price2({
					pay_id: pay_id,
					pay_id_price: new_price,
				});
				if (res.err_no == 0) {
					this.$showToast('修改价钱成功');
					this.daili_price.forEach((item) => {
						if (item.pay_id === pay_id) {
							item.price = new_price;
						}
					});
				} else {
					this.$showToast(res.err_msg);
				}
			} catch (e) {
				console.log(e);
				if (!e) return;
				uni.showModal({
					content: e.errMsg || e.message,
					showCancel: false,
				});
			}
		},
		jumpto(url) {
			uni.navigateTo({
				url: url,
			});
		},
		get_daili_qrcode() {
			let url = `https://sm.2sxzw.com/api/huanlian/get_daili_qrcode/?uid=${this.userData.uid}`;
			uni.previewImage({
				urls: [url],
			});
		},
		async get_daili_data() {
			try {
				let res = await get_daili2();
				this.daili_data = res.data;
			} catch (e) {
				console.log(e);
				if (!e) return;
				uni.showModal({
					content: e.errMsg || e.message,
					showCancel: false,
				});
			}
			try {
				let res = await get_daili_price();
				this.daili_price = res.data;
			} catch (e) {
				console.log(e);
				if (!e) return;
				uni.showModal({
					content: e.errMsg || e.message,
					showCancel: false,
				});
			}
		},
		async shenqingdaili() {
			try {
				let res = await get_daili();
				this.get_daili_data();
			} catch (e) {
				if (!e) return;
				uni.showModal({
					content: e.errMsg || e.message,
					showCancel: false,
				});
			}
		},
	},
};
</script>

<style lang="scss">
@import 'Daili.scss';
</style>
